<script setup>
import { ref } from 'vue';
let productImages = ref([]);
productImages.value = [
  'http://t14.baidu.com/it/u=634651283,3878903488&fm=224&app=112&f=JPEG?w=500&h=500',
  'https://img2.baidu.com/it/u=636042073,2353759922&fm=253&fmt=auto&app=138&f=JPEG?w=757&h=500',
  'http://t15.baidu.com/it/u=1908950693,1667841028&fm=224&app=112&f=JPEG?w=500&h=500',
  'https://img2.baidu.com/it/u=2273168404,2562449948&fm=253&fmt=auto&app=120&f=JPEG?w=364&h=364',
  'http://t15.baidu.com/it/u=2695476158,1272047055&fm=224&app=112&f=JPEG?w=500&h=500',
]

</script>

<template>
  <el-pagination
  layout="prev, pager, next"
  :total="totalProducts"
  :page-size="pageSize"
  @current-change="handlePageChange">
</el-pagination>
<el-carousel :interval="4000" type="card" height="500px">
  <el-carousel-item v-for="(image, index) in productImages" :key="index">
    <img :src="image" class="carousel-image" width="500">
  </el-carousel-item>
</el-carousel>
</template>

<style scoped>

</style>
